<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Bar Chart</title>
	<script async="" src="/js/analytics.js"></script>
	<script src="/js/Chart.bundle.js"></script>
	<style type="text/css">/* Chart.js */
	@-webkit-keyframes chartjs-render-animation{from{opacity:0.99}to{opacity:1}}@keyframes chartjs-render-animation{from{opacity:0.99}to{opacity:1}}.chartjs-render-monitor{-webkit-animation:chartjs-render-animation 0.001s;animation:chartjs-render-animation 0.001s;}
	</style>
	<script src="/js/utils.js"></script>
	<style>
	canvas {
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}
	</style>
</head>

<body>
	<div id="container" style="width: 100%;"><div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;"><div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div></div><div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:200%;height:200%;left:0; top:0"></div></div></div>
		<canvas id="canvas" width="1896" height="948" class="chartjs-render-monitor" style="display: block; height: 474px; width: 948px;"></canvas>
	</div>
	<script language="javascript" type="text/javascript" src="/assets/javascript/jquery-2.1.4.min.js"></script>
	<script>
		function dataInit(){
			var data = getDateTime();
			$.ajax({
				type: "GET",
				url: "/achievement_date",
				data: data,
				dataType: "json",
				contentType:"application/json;charset=utf8",
				async:false,
				success: function(res){
					if(res.code != 0){
						alert("数据初始化失败");
						return ;
					}else{
						data = res.domain;
					}
				},
				complete:function(){
					
				}
			});
			return data;
		}
		
		
		function getDateTime(){
			var data = {};
			var startDate = $("#startDateInput").val();
			var endDate = $("#endDateInput").val();
			if(startDate != '' && endDate != ''){
				data.startDate = startDate;
				data.endDate = endDate;
			}
			return data;
		}
		/**收入**/
		function initDataIncome(){
			var data = getDateTime();
			$.ajax({
				type: "GET",
				url: "/points/income",
				data: data,
				dataType: "json",
				contentType:"application/json;charset=utf8",
				async:false,
				success: function(res){
					if(res.code != 0){
						alert("数据初始化失败");
						return ;
					}else{
						data = res.domain;
					}
				},
				complete:function(){
					
				}
			});
			return data;
		}
		/**支出**/
		function initDataExpend(){
			var data = getDateTime();
			$.ajax({
				type: "GET",
				url: "/points/expend",
				data: data,
				dataType: "json",
				contentType:"application/json;charset=utf8",
				async:false,
				success: function(res){
					if(res.code != 0){
						alert("数据初始化失败");
						return ;
					}else{
						data = res.domain;
					}
				},
				complete:function(){
					
				}
			});
			return data;
		}
		var dateValue = dataInit();
		console.log(dateValue);
		var income = initDataIncome();
		console.log(income);
		var expend = initDataExpend();
		console.log(expend);
		var color = Chart.helpers.color;
		var barChartData = {
			labels: dateValue,
			datasets: [{
				label: '收入',
				backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
				borderColor: window.chartColors.red,
				borderWidth: 1,
				data: income
			}, {
				label: '支出',
				backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
				borderColor: window.chartColors.blue,
				borderWidth: 1,
				data:  expend
			}]

		};

		window.onload = function() {
			var ctx = document.getElementById('canvas').getContext('2d');
			window.myBar = new Chart(ctx, {
				type: 'bar',
				data: barChartData,
				options: {
					responsive: true,
					legend: {
						position: 'top',
					},
					title: {
						display: true,
						text: '收支报表-最近10天'
					},tooltips: {
						enabled: true,
						position : 'average',
						mode: 'index',
						intersect: false
					},
					hover: {
						mode: 'nearest',
						intersect: true
					},scales: {
						xAxes: [{
							display: true,
							scaleLabel: {
								display: true,
								labelString: '日期'
							}
						}],
						yAxes: [{
							display: true,
							scaleLabel: {
								display: true,
								labelString: '金额(单位 元)'
							}
						}]
					}
				}
			});
		};
	</script>

</body></html>